<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="description" content="我的收藏-个人中心-政府采购信息网">
    <meta name="keywords" content="我的收藏">
    <link rel="icon" href="/web/img/favicon.ico">
    <link rel="shortcut icon" href="/web/img/favicon.ico">
    <!--    <link rel="stylesheet" href="//at.alicdn.com/t/font_2052942_xzk2q3ix0w.css">-->
    <title>我的收藏-个人中心-政府采购信息网</title>
    <style type="text/less">
        @import "/web/public/public.less";
        .container{
            #main{
                .clearfix;
                width: 1024px;
                margin: 0 auto;
                position: relative;
                padding-top: 23px;

                .aside-wrap{
                    width: 302px;
                    .fl;
                }
                .list-wrap{
                    width: 688px;
                    .fr;

                    .tab-list{
                        height: 50px;
                        background-color: #efefef;
                        .tab-item{
                            width: 136px;
                            line-height: 50px;
                            background-color: #ffffff;
                            border-top: 1px solid #3c76f5;
                            text-align: center;
                        }
                    }
                    .content-list{
                        margin-top: 30px;
                        &>li{
                            border-bottom: 1px solid #EEEEEE;
                            padding: 20px 0;
                            .clearfix;
                            .left{
                                width: 230px !important;
                                height: 140px !important;
                                min-height: 0 !important;
                                padding: 0 !important;
                                .fl;
                                img{
                                    width: 100%;
                                    height: 100%;
                                }
                                &+.right{
                                    width: 435px !important;
                                    .fr;
                                }
                            }
                            .right{
                                min-height: 0 !important;
                                .title{
                                    width: 100%;
                                    font-size: 20px;
                                    .ellipsis;
                                }
                                p{
                                    height: 45px;
                                    color: #7f7f7f;
                                    font-size: 14px;
                                    line-height: 24px;
                                    margin-top: 15px;
                                    .ellipsis-mult(2);
                                }
                                .info{
                                    height: 27px;
                                    overflow: hidden;
                                    margin-top: 30px;
                                    font-size: 14px;
                                    color: #a8a8a8;
                                    .clearfix;
                                    line-height: 26px;
                                    i{
                                        margin-left: 20px;
                                        &:first-child{
                                            margin-left: 0;
                                        }
                                        &+span{
                                            margin-left: 5px;
                                        }
                                    }
                                    a{
                                        display: inline-block;
                                        color: #a8a8a8;
                                        background-color: #F0F0F0;
                                        border-radius: 13px;
                                        padding: 0 13px;
                                        .fr;
                                        margin-left: 10px;
                                        &:last-child{
                                            margin-left: 0;
                                        }
                                    }
                                }
                            }
                        }

                    }
                }
            }
        }
    </style>

    <script src="/web/lib/less.min.js"></script>
    <script src="/web/lib/jquery-1.12.4.min.js"></script>
    <script src="/web/public/public.js"></script>
    <script src="/web/lib/jquery.pagination.js"></script>
</head>
<body>
<div class="container">
    <!--这里引入header-->
    <!--#include virtual="/web/html/header/header.htm"-->
    <div id="main">
        <div class="aside-wrap">
            <!--#include virtual="/web/html/fragment/personal/aside.htm"-->
        </div>
        <div class="list-wrap">
            <div class="tab-list">
                <div class="tab-item">
                    我的收藏
                </div>
            </div>
            <ul class="content-list">
            </ul>
            <div class="list-pagination"></div>
        </div>
    </div>
    <!--#include file="/web/html/footer/footer.htm"-->
</div>
<script>
    $(function () {
        $('#personal-center-aside .aside-list .collection').addClass('active');
        function getTagList(pageNum,resetPage){
            var pageSize = 10;
            $.ajax({
                url: ports.getMyCollection,
                data: {
                    pageNum:pageNum,
                    pageSize:pageSize
                },
                success:function(res) {
                    console.log('获取我的收藏',res);
                    if(res.status==200){
                        var tagListHtml = '';
                        var tagList = res.data.list;
                        if(tagList&&tagList.length){
                            $.each(tagList,function (i,item) {
                                var keywordsListHtml = '';
                                if(item.articleKeywords){
                                    item.articleKeywords.forEach(function (item1) {
                                        keywordsListHtml += '<a href='+ '/web/html/list/tags-list.html?id='+item1.value+' class="tag">'+ item1.label +'</a>'
                                    })
                                }

                                tagListHtml += '<li>\n' +
                                    (item.articleImage ?'<div class="left"><img src='+ item.articleImage  +' alt='+ item.articleTitle +'></div>':'')
                                    +
                                    '                    <div class="right">\n' +
                                    '                        <div class="title"><a target="_blank" href='+ item.articleUrl +'>'+ item.articleTitle +'</a></div>\n' +
                                    '                        <p>\n' + item.articleInfo +
                                    '                        </p>\n' +
                                    '                        <div class="info">\n' +
                                    '                            <i class="iconfont icon-shijian"></i><span>'+ item.createTime.substr(0,10) +'</span>\n' +
                                    '\n'
                                    + keywordsListHtml +
                                    '                        </div>\n' +
                                    '                    </div>\n' +
                                    '                </li>'
                            })
                            $('ul.content-list').html(tagListHtml);
                            if(resetPage){
                                $('.list-pagination').pagination({
                                    prevContent: '< 上一页',
                                    nextContent: '下一页 >',
                                    totalData: res.data.total,
                                    showData: pageSize,
                                    coping: true,
                                    callback: function (api) {
                                        console.log(api.getCurrent());
                                        var current = api.getCurrent();
                                        document.body.scrollTop = 0;
                                        document.documentElement.scrollTop = 0;
                                        getTagList(current,false);
                                    }
                                });
                            }
                        }
                    }
                }
            });
        }

        getTagList(1,true);
    })
</script>
</body>
</html>
